<template>
  <div>
    <div>
      <el-row>
        <el-col :span="12">
          <el-page-header @back="goBack" content="编写消息"></el-page-header>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button class="ml-5" type="primary" @click="insertAritcle">发布</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <!--            文章标题-->
      <el-row style="margin: 5px 0px">
        <el-col :span="4">
          <div style="color: #000;line-height: 40px;text-align: right">文章标题：</div>
        </el-col>
        <el-col :span="18">
          <el-input
              placeholder="请输入文章标题"
              v-model="articleTitle"
              clearable>
          </el-input>
        </el-col>
      </el-row>
      <!--            文章简介-->
      <el-row style="margin: 5px 0px">
        <el-col :span="4">
          <div style="color: #000;line-height: 40px;text-align: right">文章简介：</div>
        </el-col>
        <el-col :span="18">
          <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 8}"
              placeholder="请输入内容"
              maxlength="200"
              show-word-limit
              v-model="articleIntro">
          </el-input>
        </el-col>
      </el-row>
      <!--            文章类别-->
      <el-row style="margin: 5px 0px">
        <el-col :span="4">
          <div style="color: #000;line-height: 40px;text-align: right">文章类别：</div>
        </el-col>
        <el-col :span="18">
          <el-select class="ml-5" filterable clearable v-for="item in sysCategoryList " v-model="articleCategoryId"
                     placeholder="消息类型">
            <el-option :label="item.sysCategoryName" :value="item.sysCategoryId"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <!--            文章封面-->
      <el-row style="margin: 5px 0px">
        <el-col :span="4">
          <div style="color: #000;line-height: 40px;text-align: right">文章封面：</div>
        </el-col>
        <el-col :span="18">
          <el-upload
              class="avatar-uploader"
              :action="`${$ysyApi}/api/UpLoadFile/`"
              :headers="headers"
              name="file"
              :show-file-list="false"
              :on-success="uploadArticleCover"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-col>
      </el-row>
      <!--            关联商品-->
      <el-row style="margin: 5px 0px">
        <el-col :span="4">
          <div style="color: #000;line-height: 40px;text-align: right">关联产品：</div>
        </el-col>
        <el-col :span="18">
          <el-input
              placeholder="请输入关联产品"
              v-model="correlateProducts"
              clearable>
          </el-input>
        </el-col>
      </el-row>
      <!--            创作作者-->
      <el-row style="margin: 5px 0px">
        <el-col :span="4">
          <div style="color: #000;line-height: 40px;text-align: right">创作作者：</div>
        </el-col>
        <el-col :span="18">
          <el-input
              :disabled="true"
              placeholder="作者昵称"
              v-model="nickname"
              clearable>
          </el-input>
        </el-col>
      </el-row>
      <!--            文章内容-->
      <el-row style="margin: 5px 0px">
        <el-col :span="4">
          <div style="color: #000;line-height: 40px;text-align: right">文章内容：</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin: 5px 0px;">
        <el-col :span="20" :offset="2">
          <div style="border: 1px solid #ccc;">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
                     :mode="mode"/>
            <Editor style="height: 800px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
                    @onCreated="onCreated"/>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style src="../../../node_modules/@wangeditor/editor/dist/css/style.css"></style>
<script>
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

export default {
  name: "InsertArticle",
  components: {Editor, Toolbar},
  data() {
    return {
      loginStatus: true,
      articleTitle: '',
      articleIntro: '',
      //作者id
      articleAuthor: '',
      //作者昵称
      nickname: '',
      //图片上传请求头
      headers: {
        Authorization: ''
      },
      //关联商品
      correlateProducts: '',
      imageUrl: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      sysCategoryList: [],
      articleCategoryId: '',
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: {placeholder: '请输入内容...'},
      mode: 'default', // or 'simple'
    }
  },
  created() {
    this.getSysCategoryAll()
    this.headers.Authorization = JSON.parse(localStorage.getItem('user')).token
    this.articleAuthor = JSON.parse(localStorage.getItem('user')).userId
    this.nickname = JSON.parse(localStorage.getItem('user')).nickname
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    goBack() {
      this.$router.back()
    },
    //上传封面图片
    uploadArticleCover(response, file, fileList) {
      this.imageUrl = this.$ysyApi + response.message
      this.articleCover = response.message
    },
    //判断上传文件是否为jpeg/png图片
    beforeAvatarUpload(file) {
      let isJPG = false;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (file.type === 'image/jpeg' || file.type === 'image/png') {
        isJPG = true;
      }
      if (!isJPG) {
        this.$message.error('上传只能是图片格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    getSysCategoryAll() {
      this.$axios({
        url: this.$api.FindSysCategoryAll,
        method: 'get',
        params: {
          sysCategoryScopeAction: '消息'
        }
      }).then(res => {
        this.sysCategoryList = res.data
      })
    },
    insertAritcle() {
      this.$axios({
        url: this.$api.InsertArticle,
        method: 'post',
        headers: {'content-type': 'multipart/form-data'},
        data: {
          articleTitle: this.articleTitle, //文章标题
          articleContent: this.html, //文章内容
          articleCover: this.articleCover,//文章封面
          articleAuthor: this.articleAuthor,//作者
          articleCategory: this.articleCategoryId,//文章类别
          articleIntro: this.articleIntro,//文章简介
          correlateProducts: '',//关联产品
        }
      }).then(res => {
        this.$notify({
          title: '成功',
          message: '新闻发布成功',
          type: 'success'
        });
        this.$router.back()
      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>